<template>
  <footer class="page_footer">
    <el-row style="
  max-width: 1100px;
  margin: 0 auto;">
      <!--左边版权内容-->
      <el-col :span="16">
        <div class="copy_right">
          <div class="page_text">
            <p>
            <i class="el-icon-hot-water"></i>
            页面总字数:{{pageNum}} | Copyright © Daes | 粤ICP备20027831号
            </p>
            <p>当前时间: {{ timer }}</p>
          </div>
        </div>
      </el-col>
      <!--右边icon-->
      <el-col :span="8">
        <div class="copy_icon">
          <div class="cover-link">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="https://space.bilibili.com/70433425/favlist">
                    <i class="iconfont icon-wifi" style="font-size:20px; color:#fff;"></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="https://gitee.com/daes/vue_shop">
                    <i class="iconfont icon-GitHub" style="font-size:20px; color:#fff;"></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="https://www.zhihu.com/people/shan-seng-26-89/posts">
                    <i class="iconfont icon-zhihu" style="font-size:20px; color:#fff;"></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="http://wpa.qq.com/msgrd?V=3&uin=810203055&Site=www.yudouyudou.com&Menu=yes">
                    <i class="iconfont icon-QQ" style="font-size:20px; color:#fff;"></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=t9PW0sSFh4WH98bGmdTY2g">
                    <i class="iconfont icon-youxiang" style="font-size:20px; color:#fff;"></i>
                  </a>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </footer>
</template>

<script>
export default {
  data () {
    return {
      pageNum: '',
      // 当前时间
      timer: ''
    }
  },
  methods: {
    async fn () {
      var that = this
      // eslint-disable-next-line no-unused-vars
      setTimeout(await function () {
        var reg = /[\u4e00-\u9fa5]/g// 汉字的正则
        // eslint-disable-next-line no-unused-vars
        var inner = document.getElementById('app')
        var str = inner.innerHTML
        that.pageNum = str.match(reg).length
      }, 500)
    },
    dateNew () {
      setInterval(this.getDate, 500)
    },
    getDate () {
      // eslint-disable-next-line no-unused-vars
      var that = this
      var times = new Date()
      var yy = times.getFullYear()
      var mm = times.getMonth() + 1
      var dd = times.getDate()
      var hh = times.getHours()
      var ff = times.getMinutes() // 分钟
      var ss = times.getSeconds() // 秒
      if (ss < 10) {
        ss = '0' + ss
      }
      if (ff < 10) {
        ff = '0' + ff
      }
      that.timer = yy + '年' + mm + '月' + dd + '日' + ' ' + hh + ':' + ff + ':' + ss
    }
  },
  mounted () {
    this.fn()
    this.dateNew()
  },
  beforeDestroy () {
    if (this.getDate) {
      clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>

<style lang="less" scoped>
.page_footer {
  position: relative;
  width: 100%;
  min-height: 60px;
  padding-top: 5px;
  background-color: rgb(17, 134, 244);
  z-index: 99;
}
.copy_right {
  line-height: 24px;
  text-align: center;
  color: #fff;
  font-size: 14px;
}
.copy_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 60px;
}
.cover-link {
  font-size: 12px;
  a {
    margin-left: 20px;
  }
}

@media screen and (min-width:500px) and (max-width:780px)  {
  .el-col-16{
    width: 100% !important;
  }
  .el-col-8{
    display: none;
  }
}
</style>
